<template>
  <div id="container"></div>
</template>

<script>
import {
  getStudentInSchoolByGrade
} from '@/api/dashboard/absentHistoryController'

import { getDateMills } from '@/utils/dateutils'

export default {
  props: ['options', 'styles', 'date', 'isInSchool'],
  name: 'xgyhighcharts',
  data () {
    return {
      chart: null,
      chartdata: [],
    }
  },
  mounted () {
    this.initChart();
    this.getPieHighdata();
    // console.log(this.$highecharts.getOptions())	
  },
  watch: {
    date: function () {
      this.getPieHighdata()
    }
  },
  methods: {
    async getPieHighdata () {
      console.log(this.isInSchool);
      let {
        msg: ret
      } = await getStudentInSchoolByGrade(1111, getDateMills(this.date), this.isInSchool);

      this.chart.series[0].setData([])
      for (let i = 0; i < ret.length; i++) {
        let temp = [];
        if (ret[i] == null)
          temp.push("后台暂无数据")
        else
          temp.push(ret[i].grade + '级学生')


        if (ret[i] == null)
          temp.push(1)
        else
          temp.push(ret[i].count)
        this.chart.series[0].addPoint(temp);
      }

      this.chart.redraw()
    },
    initChart () {
      this.chart = new this.$highecharts.Chart("container", {
        chart: {
          // marginRight: 100,
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45
          }
        },
        title: {
          text: this.isInSchool ? '全校不同年级不在校学生分布饼状图' : '全校不同年级在校学生分布饼状图'
        },
        subtitle: {

        },
        legend: {
          floating: true,
          accessibility: {
            enabled: true
          },
          align: "right", //程度标的目标地位
          verticalAlign: "bottom", //垂直标的目标地位
          itemMarginTop: 10,
          // itemMarginBottom:1,
          itemWidth: 150,
          itemHeight: 100,
          itemStyle: {
            "text-algin": "center",
            "padding-bottom": 5,
            "color": "#000",
            "cursor": "pointer",
            "fontSize": "15px",
            "fontWeight": "bold",

          },
          // itemDistance:300,//水平布局有用
          symbolWidth: 25,
          symbolHeight: 25,
          symbolPadding: 20,
          userHtml: true,
          layout: 'verticle', //垂直布局
          x: 0, //间隔x轴的间隔
          y: 0 //间隔Y轴的间隔
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            innerSize: '40%',
            showInLegend: true, //重点图例显示
            animation: {
              duration: 2000
            },
            depth: 1,
            colors: ['#8bccac', '#65a0d1', '#d9cee2', '#f2de85'],
            dataLabels: {
              enabled: true,
              formatter: function () {
                return this.point.name + '：' + this.point.options.y + '   所占比率：' + this
                  .point.percentage.toFixed(1) + "%";
              }
            }
          }
        },
        credits: {
          enabled: false //不显示LOGO
        },
        series: [{
          name: '',
          data: []
        }]
      });
    }
  }
}
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
:deep(.highcharts-legend-item) {
  display: flex;
  align-items: center;
}
</style>
